<template>
    <div class="user-info-box">
        <img :src="passImg" alt="pass-img" class="pass-img">
        <div class="text">已通过认证</div>
        <CellGroup class="user">
            <Field
                    v-model="name"
                    label="姓名"
                    :readonly="true"
                    class="user-item acea-row row-middle"
            />
            <Field
                    v-model="IDCard"
                    label="身份证"
                    :readonly="true"
                    class="user-item acea-row row-middle"
            />
        </CellGroup>
    </div>
</template>

<script>
    import {Field,CellGroup} from 'vant';
    const loadImg = name => require(`@/assets/images/${name}.png`)
    export default {
        name: "OuthInfo",
        components:{
            Field,
            CellGroup
        },
        data() {
            return {
                name:'张三',
                IDCard:'51011111111111',
                passImg:loadImg('outh_pass')
            }
        }
    }
</script>

<style scoped lang="scss">
    .user-info-box{
        width:335px;
        height:352px;
        background:rgba(255,255,255,1);
        border-radius:8px;
        margin: 20px auto 0;
        overflow: hidden;
        .pass-img{
            width: 100px;
            height: 100px;
            display: block;
            margin: 40px auto 15px;
        }
        .text{
            font-size:16px;
            font-weight:400;
            color:rgba(13,205,181,1);
            text-align: center;
        }
        .user{
            width:255px;
            height:135px;
            margin: 25px auto 0;
            .user-item{
                height: 50%;
            }
        }
    }
</style>
